<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>顺丰打印</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/sf_js/jquery-3.2.1.min.js"></script>
    <script src="${ctxStatic}/sf_js/bootstrap.min.js"></script>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/sf_js/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/sf_js/bootstrapValidator.css"/>

    <script>
    $(document).ready(function() {
        var oInput = document.getElementById("orderNo");
        oInput.focus();
    });

    function  keyLogin(e) {
        var theEvent = window.event || e;
        var orderNo = $("#orderNo").val();
        if (e.key=='Enter' || e == 'Enter') {
            var param = {
                "barCode":orderNo

            };
            $.post("${ctx}/sfprinter/printer/savemailNo", param, function(sfresult) {
                        $("#mailNo").val(sfresult["mailNo"]);
                        //基本数据
                        data.mailNo = sfresult["mailNo"];
                        if ($('#expressTypeSelect').children('option:selected').val() !== '4') {
                            data.expressType = parseInt($('#expressTypeSelect option:selected').val());
                        } else {
                            data.expressType = parseInt($('#expressType').val());
                        }
                        data.payMethod = parseInt($('#payMethodSelect option:selected').val());
                        data.monthAccount = sfresult["CUSTID"];
                        data.orderNo = orderNo;
                        data.zipCode = "411";
                        //寄件人信息
                        data.deliverCompany = sfresult["deliverCompany"];
                        data.deliverName = sfresult["deliverName"];
                        data.deliverMobile = sfresult["deliverMobile"];
                        data.deliverTel = sfresult["deliverTel"];
                        data.deliverProvince = sfresult["deliverProvince"];
                        data.deliverCity = sfresult["deliverCity"];
                        data.deliverCounty = sfresult["deliverCounty"];
                        data.deliverAddress = sfresult["deliverAddress"];
                        data.deliverShipperCode = sfresult["deliverShipperCode"];
                        $('#consignerName').val(sfresult["consignerName"]);
                        $('#consignerMobile').val(sfresult["consignerMobile"]);
                        $('#consignerProvince').val(sfresult["consignerProvince"]);
                        $('#consignerCity').val(sfresult["consignerCity"]);
                        $('#consignerCounty').val(sfresult["consignerCounty"]);
                        $('#consignerAddress').val(sfresult["consignerAddress"]);
                        $('#consignerShipperCode').val(sfresult["consignerShipperCode"]);
                        //收件人信息
                        data.consignerCompany = $('#consignerCompany').val() ? $('#consignerCompany').val() : null;
                        data.consignerName = $('#consignerName').val() ? $('#consignerName').val() : null;
                        data.consignerMobile = $('#consignerMobile').val() ? $('#consignerMobile').val() : null;
                        data.consignerTel = $('#consignerTel').val() ? $('#consignerTel').val() : null;
                        data.consignerProvince = $('#consignerProvince').val() ? $('#consignerProvince').val() : null;
                        data.consignerCity = $('#consignerCity').val() ? $('#consignerCity').val() : null;
                        data.consignerCounty = $('#consignerCounty').val() ? $('#consignerCounty').val() : null;
                        data.consignerAddress = $('#consignerAddress').val() ? $('#consignerAddress').val() : null;
                        data.consignerShipperCode = $('#consignerShipperCode').val() ? $('#consignerShipperCode').val() : null;
                        //其他信息
                        data.encryptMobile = false;
                        data.encryptCustName = false;
                        //丰密运单相关配置
                        data.abFlag = 'A';
                        data.xbFlag = 'XB';
                        data.proCode = "T1";
                        data.destRouteLabel = null;
                        data.sourceTransferCode = null;
                        data.printIcon = "";
                        //货物信息
                        data.cargoInfoDtoList[0].cargo ="衬衫";
                        data.cargoInfoDtoList[0].cargoCount = sfresult["cargoCount"];
                        data.appId = sfresult["appId"];
                        data.appKey = sfresult["appKey"];
                        data.destCode = sfresult["destCode"];
                        waybillPrintUrl = $('#waybillPrintUrl').val();
                        if ($('#printLogo option:selected').val() == 1) {
                            waybillPrintUrl = waybillPrintUrl.replace(/type=V2.0/ig, "type=V2.1").replace(/type=V3.0/ig, "type=V3.1");
                        }
                        var oReq = new XMLHttpRequest();
                        oReq.open("POST", waybillPrintUrl, true);
                        oReq.onload = function (oEvent) {
                            // Uploaded.
                        };
                        var blob = new Blob(["[" + JSON.stringify(data) + "]"], {type: 'text/plain'});
                        oReq.send(blob);
                        oReq.onreadystatechange = function () {
                            if (oReq.readyState == 4 && (oReq.status == 200 || oReq.status == 304)) { // 304未修改
                                var isImg = $('#waybillTypeSelect option:selected').val();
                                if (isImg % 2 !== 0) {
                                    if (JSON.parse(oReq.response).result.length == 0) {
                                        $("#loading .modal-body").html('<h5 style="color:#EC5466">电子运单参数输入有误，请重新填写</h5>');
                                        //加载loading...完成
                                        setTimeout(function () {
                                            $("#loading").modal('hide')
                                        }, 1500)
                                        return;
                                    } else {
                                        var respStr = oReq.response;
                                        var imageStr = respStr.substring(respStr.indexOf('["') + 2, respStr.length - 5);
                                        imageStr = imageStr.replace(/\\n/ig, "");
                                        $('#picShow .modal-body').html('');
                                        if (imageStr.indexOf('","') != -1) {
                                            var imageArr = imageStr.split('","');
                                            //多张图片
                                            for (var i = 0; i <= imageArr.length - 1; i++) {
                                                $('#picShow .modal-body').append('<img width="50%" style="max-height: 750px;" src="data:image/jpeg;base64,' + imageArr[i] + '" />');
                                            }
                                        } else {
                                            //一张图片  imageStr 为图片base64内容
                                            $('#picShow .modal-body').append('<img width="50%" style="margin-left: 25%;" src="data:image/jpeg;base64,' + imageStr + '" />');
                                        }
                                        //加载loading...完成
                                        $("#loading").modal('hide');
                                        $('#picShow').modal('show');
                                    }
                                } else {
                                    if (JSON.parse(oReq.response).result.indexOf('系统异常') !== -1) {
                                        $("#loading .modal-body").html('<h5 style="color:#EC5466">电子运单参数输入有误，请重新填写</h5>');
                                    } else {
                                        $("#loading .modal-body").html('<h5 style="color:#EC5466">' + JSON.parse(oReq.response).result + '</h5>');
                                    }
                                    //加载loading...完成
                                    setTimeout(function () {
                                        $("#loading").modal('hide')
                                    }, 1500)
                                    return;
                                }
                            } else if (oReq.readyState == 4 && oReq.status == 0) {
                                $("#loading .modal-body").html('<h5 style="color:#EC5466">打印失败，打印服务未启动</h5>');
                                setTimeout(function () {
                                    $("#loading").modal('hide')
                                }, 1500)
                            } else if (oReq.readyState == 4 && oReq.status == 500) {
                                $("#loading .modal-body").html('<h5 style="color:#EC5466">参数格式错误，请核对后重新输入</h5>');
                                setTimeout(function () {
                                    $("#loading").modal('hide')
                                }, 1500)
                            }
                        }
                    $("#orderNo").val("");
            },'json');
        }
    }
    </script>
</head>
<body>
<div class="container" style="margin-top: 20px;">
    <div>
        <h1 class="panel-title" style="font-weight: 600;font-size: 20px; text-align: center">运单信息表</h1>
    </div>

    <div class="panel-body div-wrapper">
        <form class="form-horizontal">
            <div class="panel">
                <div class="div-header">
                        <span class="edit-title">运单输出方式</span>
                        <span class="editIcon"></span>
                    <!--</h3>-->
                </div>
                <div id="waybillOutType" class=" in div-content" >
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label"><span
                                    class="star">*</span>&nbsp;&nbsp;输出方式</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="waybillTypeSelect" disabled>
                                    <option value="0">二联单_丰密【打印机输出】</option>
                                    <option value="1">二联单_丰密【图片输出】</option>
                                    <option value="2" selected>三联单_丰密【打印机输出】</option>
                                    <option value="3">三联单_丰密【图片输出】</option>
                                </select>
                            </div>
                            <div class="col-sm-7">
                                <input type="url" class="form-control" id="waybillPrintUrl" placeholder="请输入url"
                                       value="" disabled>
                                <!--http://localhost:4040/sf/waybill/print?type=V2.0_poster_100mm150mm&output=print-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="div-header">
                        <span class="edit-title">基本信息</span>
                        <span class="editIcon"></span>
                    <!--</h3>-->
                </div>
                <div id="basicInfo" class=" div-content">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="orderNo" class="col-sm-2 control-label">订单号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="orderNo" placeholder="请输入订单号" value="" onkeydown="keyLogin(event);"  onfocus="javascript:this.select();">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label"><span
                                    class="star">*</span>&nbsp;&nbsp;快递产品类型</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="expressTypeSelect">
                                    <option value="1" selected="selected">标准快递</option>
                                    <option value="2">顺丰特惠</option>
                                    <option value="3">电商特惠</option>
                                    <option value="5">顺丰次晨</option>
                                    <option value="6">顺丰即日</option>
                                    <option value="7">电商速配</option>
                                    <option value="9">顺丰宝平邮</option>
                                    <option value="10">顺丰宝挂号</option>
                                    <option value="11">医药常温</option>
                                    <option value="13">物流普运</option>
                                    <option value="14">冷运到家</option>
                                    <option value="15">生鲜速配</option>
                                    <option value="16">大闸蟹专递</option>
                                    <option value="18">重货快运</option>
                                    <option value="35">物资配送</option>
                                    <option value="36">汇票专送</option>
                                    <option value="110">证照专递产品</option>
                                    <option value="111">顺丰干配</option>
                                    <option value="112">顺丰空配</option>
                                    <option value="125">专线普运</option>
                                    <option value="134">夜配</option>
                                    <option value="154">重货包裹</option>
                                    <option value="155">小票零担</option>
                                    <option value="4">其他</option>
                                </select>
                            </div>
                            <div class="col-sm-8">
                                <input type="url" class="form-control" id="expressType"
                                       placeholder="请输入快递产品类型,只能输入1~200数字" value="标准快递" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label"><span
                                    class="star">*</span>&nbsp;&nbsp;付款方式</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="payMethodSelect" disabled>
                                    <option value="1" selected="">寄付</option>
                                    <option value="2">到付</option>
                                    <option value="3">第三方付</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mailNo" class="col-sm-2 control-label"><span class="star">*</span>&nbsp;&nbsp;运单号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="mailNo" placeholder="请输入运单号"
                                       value="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="div-header">
                        <span class="edit-title">收件人信息</span>
                        <span class="editIcon"></span>
                    <!--</h3>-->
                </div>
                <div id="receiverInfo" class="div-content">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="consignerCompany" class="col-sm-2 control-label">收件人公司</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerCompany" placeholder="请输入收件人公司"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="consignerName" class="col-sm-2 control-label"><span class="star">*</span>&nbsp;&nbsp;收件人姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerName" placeholder="请输入收件人姓名"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="consignerMobile" class="col-sm-2 control-label"><span class="star">*</span>&nbsp;&nbsp;收件人手机</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerMobile" placeholder="请输入收件人手机"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="consignerTel" class="col-sm-2 control-label">收件人电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerTel" placeholder="请输入收件人电话"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <label for="" class="col-sm-2 control-label"><span class="star">*</span>&nbsp;&nbsp;收件人省/市/区</label>
                            <div class="col-sm-10">
                                <div class="form-group col-sm-4" style="margin-left: -30px;">
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control col-sm-4" id="consignerProvince"
                                               placeholder="请输入收件人省" value="">
                                    </div>
                                    <label for="consignerProvince" class="col-sm-2 control-label">省</label>
                                </div>
                                <div class="form-group col-sm-4" style="margin-left: 10px;">
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control col-sm-4" id="consignerCity"
                                               placeholder="请输入收件人市" value="">
                                    </div>
                                    <label for="consignerCity" class="col-sm-2 control-label">市</label>
                                </div>
                                <div class="form-group col-sm-4" style="margin-left: 10px;">
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control col-sm-4" id="consignerCounty"
                                               placeholder="请输入收件人区" value="">
                                    </div>
                                    <label for="consignerCounty" class="col-sm-2 control-label">区</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="consignerAddress" class="col-sm-2 control-label"><span class="star">*</span>&nbsp;&nbsp;收件人详细地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerAddress"
                                       placeholder="请输入收件人详细地址"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="consignerShipperCode" class="col-sm-2 control-label"><span
                                    class="star">*</span>&nbsp;&nbsp;收件人邮政编码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="consignerShipperCode"
                                       placeholder="请输入收件人邮政编码" value="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-10 text-center">
            	<!-- <button class="btn btn-primary" style="width: 200px;margin-left: 20%;height: 40px; background: #ec5466;cursor: pointer;border: none" onclick="keyLogin('Enter','select')"
                        type="button">查询
                </button> -->
                <button class="btn btn-primary" style="width: 200px;margin-left: 20%;height: 40px; background: #ec5466;cursor: pointer;border: none" onclick="keyLogin('Enter','save')"
                        type="button">提交
                </button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var locationHost = location.host;
    var waybillPrintUrls = [];
    var httpStr = "http://";
    var tempStr = httpStr.concat("localhost:4040");
    //    var  tempUrlArr= ["/sf/waybill/print?type=V2.0_poster_100mm150mm&output=print", "/sf/waybill/print?type=V2.0_poster_100mm150mm&output=image", "/sf/waybill/print?type=V3.0_poster_100mm210mm&output=print", "/sf/waybill/print?type=V3.0_poster_100mm210mm&output=image", "/sf/waybill/print?type=V2.0.FM_poster_100mm150mm&output=print", "/sf/waybill/print?type=V2.0.FM_poster_100mm150mm&output=image", "/sf/waybill/print?type=V3.0.FM_poster_100mm210mm&output=print", "/sf/waybill/print?type=V3.0.FM_poster_100mm210mm&output=image"];
    var tempUrlArr = ["/sf/waybill/print?type=V2.0.FM_poster_100mm150mm&output=print", "/sf/waybill/print?type=V2.0.FM_poster_100mm150mm&output=image", "/sf/waybill/print?type=V3.0_poster_100mm210mm&output=noAlertPrint", "/sf/waybill/print?type=V3.0.FM_poster_100mm210mm&output=image"];
    for (var i = 0; i < tempUrlArr.length; i++) {
        waybillPrintUrls[i] = tempStr.concat(tempUrlArr[i])
    }
    $('#waybillPrintUrl').val(waybillPrintUrls[2]);
    var waybillPrintUrl = "",
            cargoInfoDtoTemplate = $('#cargoInfoDto1').html();
    var data = {
        //基本信息
        mailNo: null,
        expressType: 1,
        payMethod: 1,
        returnTrackingNo: null,
        monthAccount: null,
        orderNo: null,
        zipCode: null,
        destCode: null,
        payArea: null,
        //寄件人信息
        deliverCompany: null,
        deliverName: null,
        deliverMobile: null,
        deliverTel: null,
        deliverProvince: null,
        deliverCity: null,
        deliverCounty: null,
        deliverAddress: null,
        deliverShipperCode: null,
        //收件人信息
        consignerCompany: null,
        consignerName: null,
        consignerMobile: null,
        consignerTel: null,
        consignerProvince: null,
        consignerCity: null,
        consignerCounty: null,
        consignerAddress: null,
        consignerShipperCode: null,
        //其他信息
        totalFee: null,
        appId: null,
        appKey: null,
        electric: null,
        cargoInfoDtoList: null,
        insureValue: null,
        codValue: null,
        codMonthAccount: null,
        encryptMobile: false,
        encryptCustName: false,
        //丰密运单相关配置
        abFlag: null,
        xbFlag: null,
        proCode: null,
        destRouteLabel: null,
        destTeamCode: null,
        codingMapping: null,
        codingMappingOut: null,
        sourceTransferCode: null,
        printIcon: null,
        qrcode: null,
        //货物信息
        cargoInfoDtoList: [{
            cargo: '',
            cargoCount: '',
            cargoUnit: '',
            cargoWeight: '',
            cargoAmount: '',
            cargoTotalWeight: '',
            sku: "",
            remark: ""
        }]
    }
    //打印输出url控制
    $('#waybillTypeSelect').off().on('change', function () {
        $('#waybillPrintUrl').val(waybillPrintUrls[$(this).children('option:selected').val()]);
        //是否配置丰密运单
//        if ($(this).children('option:selected').val() <= 3) {
//            $('#fengmiConfig').css('display', 'none');
//        } else {
//            $('#fengmiConfig').css('display', 'block');
//        }
    })
    //快递产品类型
    $('#expressTypeSelect').off().on('change', function () {
        var expressTypeNum = $(this).children('option:selected').val();
        if (expressTypeNum !== '4') {
            $('#expressType').attr('disabled', true).val($(this).children('option:selected').text());
            if (expressTypeNum == 2 || expressTypeNum == 3 || expressTypeNum == 13) {
                $('#electric').val('E');
            } else {
                $('#electric').val('');
            }
        } else {
            $('#expressType').attr('disabled', false).val('');
            $('#expressType').off().on('change', function () {
                $('#electric').val('');
            })
        }
    })
    //添加货物信息
    $('#addCargoInfoDto').off().on('click', function () {
        $('#cargoInfo').collapse('show');
        if (data.cargoInfoDtoList.length == 1) {
            var num = data.cargoInfoDtoList.length + 1;
            $(this).parent().next().children().append('<div class="col-sm-5" id="cargoInfoDto' + num + '" style="margin-top: 30px;">' + cargoInfoDtoTemplate + '</div>')
            data.cargoInfoDtoList.push({
                cargo: '',
                parcelQuantity: '',
                cargoCount: '',
                cargoUnit: '',
                cargoWeight: '',
                cargoAmount: '',
                cargoTotalWeight: ''
            })
            //添加删除按钮
            $('#addCargoInfoDto').hide();
            $('#removeCargoInfoDto').show();
        }
    });


    //图片另存为功能
    $('#save').off().on('click', function () {
        saveAs();
    })
    function saveAs() {
        $("#picShow .modal-body img").each(function (index, El) {
            $('body').append('<canvas id="canvas" hidden>当前浏览器不支持canvas</canvas>');
            $('#canvas').attr('width', El.width * 2).attr('height', El.height * 2);
            var ctx = $('#canvas')[0].getContext('2d');
            //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
            ctx.drawImage(El, 0, 0, El.width * 2, El.height * 2);
            download('jpg', $('#canvas')[0]);
            $('#canvas').remove()
        })
    }
    //图片下载操作,指定图片类型
    function download(type, canvas) {
        //设置保存图片的类型
        var imgdata = canvas.toDataURL(type);
        //将mime-type改为image/octet-stream,强制让浏览器下载
        var fixtype = function (type) {
            type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        }
        imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
        //将图片保存到本地
        var saveFile = function (data, filename) {
            var link = document.createElement('a');
            link.href = data;
            link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            link.dispatchEvent(event);
        }
        var filename = new Date().getTime() + '.' + type;
        saveFile(imgdata, filename);
    }
</script>
</body>
</html>
